<template>
  <div>
    <div class="top">
      <van-nav-bar title="购物车" />
    </div>
    <div class="bigBox">
      <GoodsShopCar
        :item="item"
        v-for="item in list"
        :key="item.name"
        :act="act"
        @countFn="countFn"
      ></GoodsShopCar>
    </div>
    <van-submit-bar
      :price="price"
      tip-icon="info-o"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked" @click="cheFn">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import GoodsShopCar from "@/components/goodsShopCar.vue";
export default {
  data() {
    return {
      list: [],
      // checked: false,
      goodsprice: 0,
      oldPrice: 0,
      num: 1,
      checke: false,
      id: null,
      priceList: [],
      act: false,
    };
  },
  components: {
    GoodsShopCar,
  },
  async created() {
    try {
      let res = await localStorage.getItem("localGoodsData");
      this.list = JSON.parse(res);
    } catch (error) {
      console.log(error);
    }
  },
  watch: {},
  computed: {
    price() {
      let sum = 0;
      // this.oldPrice = this.num * this.goodsprice * 100;
      for (let i = 0; i < this.priceList.length; i++) {
        if (this.priceList[i].checked) {
          sum += this.priceList[i].price * this.priceList[i].num * 100;
        }
      }
      return sum;
    },
    checked: {
      get() {
        if (this.list.length == this.priceList.length) {
          return this.priceList.every((item) => item.checked === true);
        } else {
          return false;
        }
      },
      set(val) {
        // this.checked = val;
        console.log(val);
        this.act = val;
      },
    },
  },
  methods: {
    onSubmit() {},
    countFn(price, num, checked, id) {
      this.goodsprice = price;
      this.num = num;
      this.checke = checked;
      // console.log(num);
      let obj = {
        id: id,
        num: num,
        price: price,
        checked: checked,
      };
      let res = this.priceList.findIndex((item) => item.id == id);
      if (res != -1) {
        this.priceList.splice(res, 1);
        this.priceList.push(obj);
        // this.id = id;
      } else {
        this.priceList.push(obj);
        // this.id = id;
      }
      // console.log(this.priceList);
    },
    cheFn() {
      // console.log(1111);
      // console.log(this.checked);
      // this.checked = !this.checked;
    },
  },
};
</script>

<style scoped lang="less">
.top {
  // width: 100%;
  padding-top: 10px;
  background-color: #fff;
}
.bigBox {
  // margin-top: 60px;
  // .box {
  //   width: 100%;
  //   height: 130px;
  //   background-color: #fff;
  //   display: flex;
  //   align-items: center;
  //   border-bottom: 1px solid #e5e5e5;
  //   .chex {
  //     padding: 0 10px;
  //   }
  //   .jpg {
  //     width: 112px;
  //     height: 112px;
  //     img {
  //       width: 100%;
  //     }
  //   }
  //   .boxContent {
  //     flex: 1;
  //     height: 112px;
  //     display: flex;
  //     flex-direction: column;
  //     justify-content: space-between;
  //     p {
  //       .qh {
  //         font-size: 13px;
  //         padding: 0 5px;
  //         width: 36px;
  //         height: 18px;
  //         background-color: #909090;
  //         color: #fff;
  //         text-align: center;
  //         display: inline-block;
  //       }
  //       .zy {
  //         font-size: 13px;
  //         padding: 0 5px;
  //         width: 36px;
  //         height: 18px;
  //         background-color: #d81e06;
  //         color: #fff;
  //         text-align: center;
  //         display: inline-block;
  //       }
  //       .title {
  //         font-size: 16px;
  //         color: #333;
  //       }
  //     }
  //     .boxBottom {
  //       display: flex;
  //       justify-content: space-between;

  //       .price {
  //         color: #d81e06;
  //         font-size: 18px;
  //         line-height: 32px;
  //       }
  //       .btnAll {
  //         button {
  //           border: none;
  //           width: 40px;
  //           text-align: center;
  //           display: inline-block;
  //           background-color: transparent;
  //         }
  //         span {
  //           background-color: #eee;
  //           padding: 0 10px;
  //           font-size: 20px;
  //         }
  //       }
  //     }
  //   }
  // }
}
/deep/.van-nav-bar__content {
  // width: 100%;
  height: 52px;
  .van-nav-bar__title {
    font-size: 20px;
  }
}
/deep/ .van-submit-bar {
  bottom: 60px;
  .van-submit-bar__bar {
    font-size: 20px;
    height: 75px;
    padding: 0 10px;
    .van-submit-bar__button {
      width: 160px;
      height: 60px;
    }
    .van-button--normal {
      font-size: 20px;
    }
    .van-checkbox__icon {
      height: 32px;
      .van-icon {
        width: 32px;
        height: 32px;
        line-height: 32px;
      }
    }
  }
}
</style>
